<template>
    <div>
        {{str}} --- {{num}}
        <button v-on:click="add">+1</button>
        <button v-on:click="add1(2)">+2</button>
        <button @click="sub($event)">-1</button>
        <button @click="num--">-1</button>

        <div>{{ str }}</div>

        <a v-bind:href="url1" target="_blank">{{ name }}</a>
        <!--标签的属性 动态绑定类名-->
        <!--语法糖 :-->
        <img :src="imgUrl"/>
    </div>
</template>
<script setup>
import {ref} from 'vue';

let num = ref(10)
let str = 'hello'

//链接的地址是动态的 /从后台获取
let name = ref('百度一下')
let url1 = ref('https://www.baidu.com')
let imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

let add = ()=>{
    console.log(num);
    num.value++
}

function add1(a) {
    // +=:num = num + a
    num.value+=a
}

//事件绑定
let sub = (e)=>{
    console.log(e)
    num.value--
}

</script>
<style scoped>
</style>